<!DOCTYPE html>
<html>
   <head>
      <title>主页</title>
       <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <!-- 引入 Bootstrap -->
       <link href="/css/bootstrap.min.css" rel="stylesheet">

       <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
       <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

       <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
       <script src="/js/bootstrap.min.js"></script>
 
      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body style="padding-top: 90px;">

        <div class="container-fluid">
        <!--导航栏-->
            <div class="row-fluid">
                <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #660066;">
                        <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" style="margin-left: 20px;color: rgb(255, 255, 255);" href="http://localhost:8080/hello/home">主页</a>
                        </div>
                        <div>
                            <ul class="nav navbar-nav">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size: 18px;margin-left: 40px;color: rgb(255, 255, 255);">
                                    硬件信息 
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu" style="background-color: #660066;">
                                    <li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">CPU</a></li>
                                    <li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">显卡</a></li>
                                    <li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">内存</a></li>
                                    <li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">硬盘</a></li>
                                    <li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">笔记本</a></li>
                                </ul>
                            </li>
                            </ul>
                        </div>
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#" style="margin-left: 40px;color: rgb(255, 255, 255);">社区交流</a>
                        </div>
                        <div>
                            <form class="navbar-form navbar-left" role="search" style="margin-left: 650px;">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="输入查找的内容" style="width: 300px;"/>
                            </div>
                            <a href="https://www.baidu.com/">
                                <img src="/img/search.png" width="35px" height="35px"/>
                            </a>
                            </form>
                        </div>
                        <div>
                            <a href="https://www.baidu.com/"><img src="/img/头像.png" style="width: 37px;margin-top: 8px;"/></a>
                        </div>
                        </div>
                    </nav>
            </div>

            <div class="row-fluid">
                <!--左端功能页面栏-->
                <div class="col-md-2" style="margin-left:0px;margin-top:40px;">
                    <div class="panel-group" id="accordion" >
                        <div class="panel panel-default" >
                            <div class="panel-heading" style="background-color: purple;">
                                <h5 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">                     
                                        <h5><span class="glyphicon glyphicon-th-list" style="color: rgb(231, 237, 238); font-size: 20px;"> 功能页面</span></h5>
                                    </a>
                                </h5>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in">
                                <div class="panel-body">
                                    <div class="list-group">
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://127.0.0.1:8080/information1">热点资讯</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/hardwareSearchPage.html">硬件匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/keywordSearchtPage">关键字匹配</a>
                                        <a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/computerResultPage">电脑猎场</a>
                                    </div>     
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--内容界面-->
                <div class="col-md-10" style="margin-top:40px;border:solid 3px purple;">
                    <!--资讯轮播图-->
                    <div class="row-fluid">
                            <div class="col-md-1 column">
                            </div>
                            <div class="col-md-10 column">
                                    <div class="page-header">
                                        <h1 style="font-family: 微软雅黑;font-weight: bold;">热点资讯</h1>
                                    </div>
                                <div id="myCarousel" class="carousel slide">
                                        <!-- 轮播（Carousel）指标 -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                            <li data-target="#myCarousel" data-slide-to="1"></li>
                                            <li data-target="#myCarousel" data-slide-to="2"></li>
                                        </ol>   
                                        <!-- 轮播（Carousel）项目 -->
                                        <div class="carousel-inner">
                                            <div class="item active">
                                                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2634172790,2987999199&amp;fm=26&amp;gp=0.jpg" alt="First slide"/>
                                            </div>
                                            <div class="item">
                                                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1032169849,3240386588&amp;fm=26&amp;gp=0.jpg" alt="Second slide"/>
                                            </div>
                                            <div class="item">
                                                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3861115627,2732340871&amp;fm=26&amp;gp=0.jpg" alt="Third slide"/>
                                            </div>
                                        </div>
                                        <!-- 轮播（Carousel）导航 -->
                                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                </div> 
                                <div class="page-header">
                                        <h1 style="font-family: 微软雅黑;font-weight: bold;">今日推荐
                                            <small>大家好，我是练习时长两年半的个人练习生</small>
                                        </h1>
                                </div>
                                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <img src="/img/timg.jpg" alt="..." class="img-responsive" />
                                          <div class="caption">
                                            <a style="font-size: 20px" href="http://localhost:8080/computers/computerResultPage">Alienware</a>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <img src="/img/timg.jpg" alt="..." class="img-responsive" />
                                          <div class="caption">
                                            <a style="font-size: 20px" href="http://localhost:8080/computers/computerResultPage">Alienware</a>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <img src="/img/timg.jpg" alt="..." class="img-responsive" />
                                          <div class="caption">
                                            <a style="font-size: 20px" href="http://localhost:8080/computers/computerResultPage">Alienware</a>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                                 <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"><!-- 大屏幕放3张略缩图，pc端放4张，平板和手机放6张-->
                                        <div class="thumbnail">
                                          <img src="/img/timg.jpg" alt="..." class="img-responsive" />
                                          <div class="caption">
                                            <a style="font-size: 20px" href="http://localhost:8080/computers/computerResultPage">Alienware</a>
                                            <p style="color:red;">
                                              hp外星人10000满减50！
                                                </p>
                                          </div>
                                        </div>
                                 </div>
                            </div>
                            <div class="col-md-1 column">
                            </div>
                            
                    </div>
                    <!--标题-->
                    <div class="row-fluid">
                    </div>


                </div>
            </div>
        </div>
    </body>
</html>